<template>
  <div class="headerTwo-comp">
    <dl>
      <dd
        v-for="item in root"
        :key="item.title"
        @click="changeNav(item)"
        :class="item === selectNav ? 'active' : ''"
      >
        <div class="title">{{ item.title }}</div>
        <div class="drop-box-wrap" v-if="item.child.length !== 0">
          <dl>
            <dd v-for="child in item.child" :key="child">
              {{ child }}
            </dd>
          </dl>
        </div>
      </dd>
    </dl>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('navTwo', ['root'])
  },
  data: function () {
    return {
      selectNav: '推荐'
    }
  },
  methods: {
    changeNav (item) {
      this.selectNav = item
    }
  }
}
</script>

<style lang="less" scoped>
.headerTwo-comp {
  width: 100%;
  height: 100%;
  dl {
    height: 100%;
    dd {
      position: relative;
      display: inline-block;
      height: 40px;
      line-height: 38px;
      margin-right: 18px;
      cursor: pointer;
      .drop-box-wrap {
        display: none;
      }
      &.active {
        .title {
          color: blue;
        }
      }
      &:hover {
        .title {
          color: blue;
        }
        .drop-box-wrap {
          position: absolute;
          top: 40px;
          left: -90px;
          display: block;
          width: 220px;
          background: rgba(133, 147, 156, 0.9);
          border-radius: 5px;
          padding-bottom: 10px;
          dl {
            width: 180px;
            margin: 0 auto;
            dd {
              margin: 5px;
              padding: 0;
              background: rgb(142, 189, 155);
              width: 80px;
              height: 30px;
              border-radius: 30px;
              line-height: 30px;
              text-align: center;
              &:hover {
                background: rgb(160, 134, 116);
                color: rgb(222, 230, 243);
              }
            }
          }
        }
      }
    }
  }
}
</style>
